@use 'angular-material-css-vars' as mat-css-vars;

@import 'styles/config/shadows';
@import 'styles/functions/_ddivide';

$s: 8px;
$card-border-radius: 4px;

// COLORS
// ------
//| elevation | overlay |   hex   |
//| --------- | ------- | ------- |
//|   00dp    |    0%   | #121212 |
//|   01dp    |    5%   | #1e1e1e |
//|   02dp    |    7%   | #222222 |
//|   03dp    |    8%   | #242424 |
//|   04dp    |    9%   | #272727 |
//|   06dp    |   11%   | #2c2c2c |
//|   08dp    |   12%   | #2e2e2e |
//|   12dp    |   14%   | #333333 |
//|   16dp    |   15%   | #343434 |
//|   24dp    |   16%   | #383838 |
//$dark0: #121212;
//$dark1: #1e1e1e;
//$dark2: #222222;
//$dark3: #242424;
//$dark4: #272727;
//$dark6: #2c2c2c;
//$dark8: #2e2e2e;
//$dark12: #333333;
//$dark16: #343434;
//$dark24: #383838;
$dark0: rgb(18, 18, 18);
$dark1: rgb(30, 30, 30);
$dark2: rgb(34, 34, 34);
$dark3: rgb(36, 36, 36);
$dark4: rgb(39, 39, 39);
$dark4_5: rgb(40, 40, 40);
$dark5: rgb(42, 42, 42);
$dark6: rgb(44, 44, 44);
$dark8: rgb(46, 46, 46);
$dark10: rgb(48, 48, 48);
$dark12: rgb(51, 51, 51);
$dark16: rgb(53, 53, 53);
$dark24: rgb(56, 56, 56);

$dark-theme-bg: $dark0;
$dark-theme-bg-darker: $dark0;
$dark-theme-bg-slightly-lighter: $dark4;
$dark-theme-bg-lighter: $dark12;
$dark-theme-bg-lightest: $dark24;
$dark-theme-bg-super-light: #616161;

$dark-theme-card-bg: $dark2;
$dark-theme-sidebar-bg: $dark8;

//$light-theme-bg: rgb(250, 250, 250);
$light-theme-bg: #f8f8f7;
$light-theme-bg-darker: rgb(235, 235, 235);
$light-theme-bg-drag-col: rgb(242, 242, 242);

$dark-theme-text-color: rgb(235, 235, 235);
$dark-theme-text-color-less-intense: transparentize($dark-theme-text-color, 0.1);
$dark-theme-text-color-muted: transparentize($dark-theme-text-color, 0.4);
$dark-theme-text-color-more-intense: rgb(245, 245, 245);
$dark-theme-text-color-most-intense: rgb(255, 255, 255);

$light-theme-text-color: rgb(44, 44, 44);
$light-theme-text-color-less-intense: transparentize($light-theme-text-color, 0.1);
$light-theme-text-color-muted: transparentize($light-theme-text-color, 0.4);
$light-theme-text-color-most-intense: rgb(0, 0, 0);

$light-theme-selected-task-bg-color: mat-css-vars.mat-css-color-primary(100);
$light-theme-selected-task-bg-color: #fff;

// TODO refactor names or how they are used
$light-theme-extra-border-color: #dddddd;
$dark-theme-extra-border-color: rgba(255, 255, 255, 0.12);
$light-theme-separator-color: rgba(18, 18, 18, 0.3);
$dark-theme-separator-color: rgba(255, 255, 255, 0.3);

$c-accent: mat-css-vars.mat-css-color-accent();
$c-warn: mat-css-vars.mat-css-color-warn();

$c-primary: mat-css-vars.mat-css-color-primary();
$c-primary-50: mat-css-vars.mat-css-color-primary(50);
$c-primary-100: mat-css-vars.mat-css-color-primary(100);
$c-primary-200: mat-css-vars.mat-css-color-primary(200);
$c-primary-300: mat-css-vars.mat-css-color-primary(300);
$c-primary-400: mat-css-vars.mat-css-color-primary(400);
$c-primary-600: mat-css-vars.mat-css-color-primary(600);
$c-primary-700: mat-css-vars.mat-css-color-primary(700);
$c-primary-800: mat-css-vars.mat-css-color-primary(800);
$c-primary-900: mat-css-vars.mat-css-color-primary(900);

$c-contrast: mat-css-vars.mat-css-contrast-color();
$c-contrast-600: mat-css-vars.mat-css-contrast-color(600);

$c-focus-border: $c-primary-400;
$c-backdrop-light-theme: rgba(0, 0, 0, 0.6);
$c-backdrop-dark-theme: rgba(0, 0, 0, 0.6);

$success-green: #4fa758;
$yellow: #fff400; // for sun

// LAYOUT
// ------
$layout-xxxs: 398px;
$layout-xxs: 440px;
$layout-xs: 600px;
$layout-sm: 960px;
$layout-md: 1280px;
$layout-lg: 1920px;
$layout-xl: 2000px;

$component-max-width: 800px;

$side-nav-width-switch-l: 1500px;
$side-nav-width: 200px;
$side-nav-width-l: $side-nav-width * 2;
//$main-header-height: $s*7;

$bar-height-large: 56px;
$bar-height: 48px;
$bar-height-small: 40px;
$mat-mini-fab-size: 48px;
$mac-title-bar-padding: 20px;

// INDEXES
// -------
$z-focus-mode-overlay: 101;
$z-side-panel-task-and-notes: 44;
$z-side-panel-planner: $z-side-panel-task-and-notes + 2;
$z-task-side-bar-over: 100;
$z-main-header-wrapper: 50;
$z-side-nav: 60;
$z-main-header: 10;
$z-bookmarks: 9;
$z-backdrop: 222;
$z-add-task-bar: 10000;
$z-search-bar: 10000;
$z-tour: 10001;

// COMPONENTS
// ----------
$standard-note-bg-light: #ffffff;
$standard-note-fg-light: $light-theme-text-color;
$standard-note-bg-dark: $dark16;
$standard-note-bg-dark-hovered: $dark-theme-bg-lightest;
$standard-note-fg-dark: #eeeeee;

$planner-item-height: 42px;
$planner-item-ico-size: 20px;

$planner-font-size: 14px;
$planner-font-size-mobile: 13px;

$planner-font-size-smaller: 11px;
$planner-font-size-smaller-mobile: 10px;

// ANIMATIONS
// ----------
// https://github.com/material-components/material-components-web/blob/master/packages/mdc-animation/_variables.scss
$ani-standard-timing: cubic-bezier(0.4, 0, 0.2, 1) !default;
$ani-enter-timing: cubic-bezier(0, 0, 0.2, 1) !default;
$ani-leave-timing: cubic-bezier(0.4, 0, 1, 1) !default;
$ani-sharp-timing: cubic-bezier(0.4, 0, 0.6, 1) !default;

$ease-in-out-quint: cubic-bezier(0.38, 0.04, 0.35, 0.96);
$transition-duration-xs: 90ms;
$transition-duration-s: 150ms;
$transition-duration-m: 225ms;
$transition-duration-l: 375ms;

$transition-duration--enter: $transition-duration-m;
$transition-duration--leave: 195ms;

$transition-enter: $transition-duration--enter $ani-enter-timing;
$transition-leave: $transition-duration--leave $ani-leave-timing;
$transition-standard: $transition-duration-m $ani-standard-timing;
$transition-sharp: $transition-duration-m $ani-sharp-timing;
$transition-slow: $transition-duration-l $ani-standard-timing;
$transition-fast: $transition-duration-s $ani-standard-timing;
$transition-ultra-fast: $transition-duration-xs $ani-standard-timing;

$page-transition-duration: $transition-duration-m;

@import 'styles/mixins/mixins';
@import 'styles/extends/extends';
